]> dgit.raspbian.org Git - gnome-shell.git/commitdiff
Switch GenericDisplay to ShellOverflowList for dynamic height
authorColin Walters <walters@verbum.org>
Sat, 4 Jul 2009 19:30:12 +0000 (15:30 -0400)
committerColin Walters <walters@verbum.org>
Sat, 4 Jul 2009 19:30:12 +0000 (15:30 -0400)
This converts GenericDisplay to totally dynamic layout, where
we display as many items as we can, and the rest cleanly overflow
into pages.

For now, remove multi-column; to readd this, we can pack multiple
display items into a single ShellOverflowList item.

js/ui/appDisplay.js
js/ui/docDisplay.js
js/ui/genericDisplay.js
js/ui/overlay.js

index 41dfe7ae57456f7793eeac13cb8fc024bb8145da..0fbad13c002da61e1e059d52bde018fe8b4a34f7 100644 (file)
@@ -169,15 +169,15 @@ Signals.addSignalMethods(MenuItem.prototype);
  *
  * width - width available for the display
  */
-function AppDisplay(width, numberOfColumns, columnGap) {
-    this._init(width, numberOfColumns, columnGap);
+function AppDisplay(width) {
+    this._init(width);
 }
 
 AppDisplay.prototype = {
     __proto__:  GenericDisplay.GenericDisplay.prototype,
 
-    _init : function(width, numberOfColumns, columnGap) {
-        GenericDisplay.GenericDisplay.prototype._init.call(this, width, numberOfColumns, columnGap);
+    _init : function(width) {
+        GenericDisplay.GenericDisplay.prototype._init.call(this, width);
 
         this._menus = [];
         this._menuDisplays = [];
@@ -429,8 +429,8 @@ AppDisplay.prototype = {
     },
 
     // Creates an AppDisplayItem based on itemInfo, which is expected be an AppInfo object.
-    _createDisplayItem: function(itemInfo) {
-        return new AppDisplayItem(itemInfo, this._columnWidth);
+    _createDisplayItem: function(itemInfo, width) {
+        return new AppDisplayItem(itemInfo, width);
     }
 };
 
index f72096a885f8615651b52db57eba49865a45a8ec..5dd10fa4ce34a6f7b4f7ef2956e64c07fdb0ebd1 100644 (file)
@@ -67,15 +67,15 @@ DocDisplayItem.prototype = {
  *
  * width - width available for the display
  */
-function DocDisplay(width, numberOfColumns, columnGap) {
-    this._init(width, numberOfColumns, columnGap);
+function DocDisplay(width) {
+    this._init(width);
 }
 
 DocDisplay.prototype = {
     __proto__:  GenericDisplay.GenericDisplay.prototype,
 
-    _init : function(width, numberOfColumns, columnGap) {
-        GenericDisplay.GenericDisplay.prototype._init.call(this, width, numberOfColumns, columnGap);
+    _init : function(width) {
+        GenericDisplay.GenericDisplay.prototype._init.call(this, width);
         let me = this;
         this._recentManager = Gtk.RecentManager.get_default();
         this._docsStale = true;
@@ -170,9 +170,9 @@ DocDisplay.prototype = {
     },
 
     // Creates a DocDisplayItem based on itemInfo, which is expected to be a DocInfo object.
-    _createDisplayItem: function(itemInfo) {
-        return new DocDisplayItem(itemInfo, this._columnWidth);
-    } 
+    _createDisplayItem: function(itemInfo, width) {
+        return new DocDisplayItem(itemInfo, width);
+    }
 };
 
 Signals.addSignalMethods(DocDisplay.prototype);
index 60380b3f9b35bc64441860fdb73188858058383a..e6285f770342dbcf21c8d1eca2331a5b629a19e7 100644 (file)
@@ -333,48 +333,46 @@ Signals.addSignalMethods(GenericDisplayItem.prototype);
  *
  * width - width available for the display
  */
-function GenericDisplay(width, numberOfColumns, columnGap) {
-    this._init(width, numberOfColumns, columnGap);
+function GenericDisplay(width) {
+    this._init(width);
 }
 
 GenericDisplay.prototype = {
-    _init : function(width, numberOfColumns, columnGap) {
+    _init : function(width) {
         this._search = '';
         this._expanded = false;
-        this._width = null;
-        this._columnWidth = null;
-
-        this._numberOfColumns = numberOfColumns;
-        this._columnGap = columnGap;
-        if (this._columnGap == null)
-            this._columnGap = DEFAULT_COLUMN_GAP;
+        this._width = width;
 
         this._maxItemsPerPage = null;
-        this._grid = new Tidy.Grid({width: this._width });
+        this._list = new Shell.OverflowList({ width: this._width,
+                                              spacing: 6.0,
+                                              item_height: ITEM_DISPLAY_HEIGHT });
 
-        this._setDimensionsAndMaxItems(width, 0);
+        this._list.connect('notify::n-pages', Lang.bind(this, function (grid, alloc) {
+            this._updateDisplayControl(true);
+        }));
+        this._list.connect('notify::page', Lang.bind(this, function (grid, alloc) {
+            this._updateDisplayControl(false);
+        }));
 
-        this._grid.column_major = true;
-        this._grid.column_gap = this._columnGap;
         // map<itemId, Object> where Object represents the item info
-        this._allItems = {}; 
-        // an array of itemIds of items that match the current request 
+        this._allItems = {};
+        // an array of itemIds of items that match the current request
         // in the order in which the items should be displayed
         this._matchedItems = [];
         // map<itemId, GenericDisplayItem>
-        this._displayedItems = {};  
+        this._displayedItems = {};
         this._displayedItemsCount = 0;
-        this._pageDisplayed = 0;
         this._selectedIndex = -1;
         // These two are public - .actor is the normal "actor subclass" property,
         // but we also expose a .displayControl actor which is separate.
         // See also getSideArea.
-        this.actor = this._grid;
+        this.actor = this._list;
         this.displayControl = new Big.Box({ background_color: ITEM_DISPLAY_BACKGROUND_COLOR,
                                             spacing: 12,
                                             orientation: Big.BoxOrientation.HORIZONTAL});
 
-        this._availableWidthForItemDetails = this._columnWidth;
+        this._availableWidthForItemDetails = width;
         this.selectedItemDetails = new Big.Box({});
     },
 
@@ -461,34 +459,15 @@ GenericDisplay.prototype = {
         return this._displayedItemsCount > 0;
     },
 
-    // Readjusts display layout and the items displayed based on the new dimensions.
-    setExpanded: function(expanded, baseWidth, expandWidth, numberOfColumns) {
-        this._expanded = expanded;
-        this._numberOfColumns = numberOfColumns;
-        this._setDimensionsAndMaxItems(baseWidth, expandWidth);
-        this._grid.width = this._width;
-        this._pageDisplayed = 0;
-        this._displayMatchedItems(true);
-        let gridWidth = this._width;
-        let sideArea = this.getSideArea();
-        if (sideArea) {
-            if (expanded)
-                sideArea.show();
-            else
-                sideArea.hide();
-        }
-        this.emit('expanded');
-    },
-
     // Updates the displayed items and makes the display actor visible.
     show: function() {
-        this._grid.show();
+        this._list.show();
         this._redisplay(true);
     },
 
     // Hides the display actor.
     hide: function() {
-        this._grid.hide();
+        this._list.hide();
         this._filterReset();
         this._removeAllDisplayItems();
     },
@@ -517,9 +496,7 @@ GenericDisplay.prototype = {
         let hadSelected = this.hasSelected();
 
         this._removeAllDisplayItems();
-
-        for (let i = this._maxItemsPerPage * this._pageDisplayed; i < this._matchedItems.length && i < this._maxItemsPerPage * (this._pageDisplayed + 1); i++) {
-            
+        for (let i = 0; i < this._matchedItems.length; i++) {
             this._addDisplayItem(this._matchedItems[i]);
         }
 
@@ -528,11 +505,9 @@ GenericDisplay.prototype = {
             this.selectFirstItem();
         }
 
-        this._updateDisplayControl(resetDisplayControl);
-
         // We currently redisplay matching items and raise the sideshow as part of two different callbacks.
-        // Checking what is under the pointer after a timeout allows us to not merge these callbacks into one, at least for now.  
-        Mainloop.timeout_add(5, 
+        // Checking what is under the pointer after a timeout allows us to not merge these callbacks into one, at least for now.
+        Mainloop.timeout_add(5,
                              Lang.bind(this,
                                        function() {
                                            // Check if the pointer is over one of the items and display the information button if it is.
@@ -559,9 +534,9 @@ GenericDisplay.prototype = {
         }
 
         let itemInfo = this._allItems[itemId];
-        let displayItem = this._createDisplayItem(itemInfo);
+        let displayItem = this._createDisplayItem(itemInfo, this._width);
 
-        displayItem.connect('activate', 
+        displayItem.connect('activate',
                             Lang.bind(this,
                                       function() {
                                           // update the selection
@@ -575,7 +550,7 @@ GenericDisplay.prototype = {
                                           // update the selection
                                           this._selectIndex(this._getIndexOfDisplayedActor(displayItem.actor));
                                       }));
-        this._grid.add_actor(displayItem.actor);
+        this._list.add_actor(displayItem.actor);
         this._displayedItems[itemId] = displayItem;
         this._displayedItemsCount++;
     },
@@ -585,7 +560,7 @@ GenericDisplay.prototype = {
         let displayItem = this._displayedItems[itemId];
         let displayItemIndex = this._getIndexOfDisplayedActor(displayItem.actor);
 
-        if (this.hasSelected() && (this._displayedItemsCount == 1 || !this._grid.visible)) { 
+        if (this.hasSelected() && (this._displayedItemsCount == 1 || !this._list.visible)) {
             this.unsetSelected();
         } else if (this.hasSelected() && displayItemIndex < this._selectedIndex) {
             this.selectUp();
@@ -625,9 +600,9 @@ GenericDisplay.prototype = {
      *             their own while the user was browsing through the result pages.
      */
     _redisplay: function(resetPage) {
-        if (!this._grid.visible)
+        if (!this._list.visible)
             return;
-        
+
         this._refreshCache();
         if (!this._filterActive())
             this._setDefaultList();
@@ -635,7 +610,7 @@ GenericDisplay.prototype = {
             this._doSearchFilter();
 
         if (resetPage)
-            this._pageDisplayed = 0;
+            this._list.page = 0;
 
         this._displayMatchedItems(true);
 
@@ -676,24 +651,6 @@ GenericDisplay.prototype = {
 
     //// Private methods ////
 
-    // Sets this._width, this._columnWidth, and this._maxItemsPerPage based on the
-    // space available for the display, number of columns, and the number of items it can fit.
-    _setDimensionsAndMaxItems: function(baseWidth, expandWidth) {
-        this._width = baseWidth + expandWidth;
-        let gridWidth;
-        let sideArea = this.getSideArea();
-        if (this._expanded && sideArea) {
-            gridWidth = expandWidth;
-            sideArea.width = baseWidth;
-        } else {
-            gridWidth = this._width;
-        }
-        this._columnWidth = (gridWidth - this._columnGap * (this._numberOfColumns - 1)) / this._numberOfColumns;
-        let maxItemsInColumn = 5; // Math.floor(height / ITEM_DISPLAY_HEIGHT);
-        this._maxItemsPerPage =  maxItemsInColumn * this._numberOfColumns;
-        this._grid.width = gridWidth;
-    },
-
     _getSearchMatchedItems: function() {
         let matchedItemsForSearch = {};
         // Break the search up into terms, and search for each
@@ -743,13 +700,12 @@ GenericDisplay.prototype = {
                 return 1;
             else
                 return this._compareItems(a, b);
-        }));        
+        }));
     },
 
-    // Displays the page specified by the pageNumber argument. The pageNumber is 0-based.
+    // Displays the page specified by the pageNumber argument.
     _displayPage: function(pageNumber) {
-        this._pageDisplayed = pageNumber;
-        this._displayMatchedItems(false);
+        this._list.page = pageNumber;
     },
 
     /*
@@ -763,29 +719,29 @@ GenericDisplay.prototype = {
     _updateDisplayControl: function(resetDisplayControl) {
         if (resetDisplayControl) {
             this.displayControl.remove_all();
-            let pageNumber = 0;
-            for (let i = 0; i < this._matchedItems.length; i = i + this._maxItemsPerPage) {
-                let pageControl = new Link.Link({ color: (pageNumber == this._pageDisplayed) ? DISPLAY_CONTROL_SELECTED_COLOR : ITEM_DISPLAY_DESCRIPTION_COLOR,
+            let nPages = this._list.n_pages;
+            let pageNumber = this._list.page;
+            for (let i = 0; i < nPages; i++) {
+                let pageControl = new Link.Link({ color: (i == pageNumber) ? DISPLAY_CONTROL_SELECTED_COLOR : ITEM_DISPLAY_DESCRIPTION_COLOR,
                                                   font_name: "Sans Bold 16px",
-                                                  text: (pageNumber + 1) + "",
+                                                  text: (i+1) + "",
                                                   height: LABEL_HEIGHT,
-                                                  reactive: (pageNumber == this._pageDisplayed) ? false : true});
+                                                  reactive: (i == pageNumber) ? false : true});
                 this.displayControl.append(pageControl.actor, Big.BoxPackFlags.NONE);
 
                 // we use pageNumberLocalScope to get the page number right in the callback function
-                let pageNumberLocalScope = pageNumber;         
+                let pageNumberLocalScope = i;
                 pageControl.connect('clicked',
                                     Lang.bind(this,
                                               function(o, event) {
                                                   this._displayPage(pageNumberLocalScope);
                                               }));
-                pageNumber ++; 
             }
         } else {
             let pageControlActors = this.displayControl.get_children();
-            for (let i = 0; i < pageControlActors.length; i++) { 
+            for (let i = 0; i < pageControlActors.length; i++) {
                 let pageControlActor = pageControlActors[i];
-                if (i == this._pageDisplayed) {
+                if (i == this._list.page) {
                     pageControlActor.color =  DISPLAY_CONTROL_SELECTED_COLOR;
                     pageControlActor.reactive = false;
                 } else {
@@ -796,10 +752,10 @@ GenericDisplay.prototype = {
         }
     },
 
-    // Returns a display item based on its index in the ordering of the 
+    // Returns a display item based on its index in the ordering of the
     // display children.
     _findDisplayedByIndex: function(index) {
-        let displayedActors = this._grid.get_children();
+        let displayedActors = this._list.get_children();
         let actor = displayedActors[index];
         return this._findDisplayedByActor(actor);
     },
@@ -819,9 +775,9 @@ GenericDisplay.prototype = {
     // Returns and index that the actor has in the ordering of the display's
     // children.
     _getIndexOfDisplayedActor: function(actor) {
-        let children = this._grid.get_children();
+        let children = this._list.get_children();
         for (let i = 0; i < children.length; i++) {
-            if (children[i] == actor) 
+            if (children[i] == actor)
                 return i;
         }
         return -1;
index 2ee8de801388f26592288e7bb14da2a04aab86bc..0c17611db32d2e2c3df9df6460af31f7a7916407 100644 (file)
@@ -30,7 +30,6 @@ const DASH_MIN_WIDTH = 250;
 const DASH_OUTER_PADDING = 4;
 const DASH_SECTION_PADDING = 6;
 const DASH_SECTION_SPACING = 6;
-const DASH_COLUMNS = 1;
 const DASH_CORNER_RADIUS = 5;
 // This is the height of section components other than the item display.
 const DASH_SECTION_MISC_HEIGHT = (LABEL_HEIGHT + DASH_SECTION_SPACING) * 2 + DASH_SECTION_PADDING;
@@ -168,7 +167,7 @@ ItemResults.prototype = {
         // LABEL_HEIGHT is the height of this._resultsText and GenericDisplay.LABEL_HEIGHT is the height
         // of the display controls.
         this._displayHeight = resultsHeight - LABEL_HEIGHT - GenericDisplay.LABEL_HEIGHT - DASH_SECTION_SPACING * 2;
-        this.display = new displayClass(resultsWidth, DASH_COLUMNS, DASH_SECTION_SPACING);
+        this.display = new displayClass(resultsWidth);
 
         this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
 
@@ -181,7 +180,6 @@ ItemResults.prototype = {
     _setSearchMode: function() {
         this.actor.height = this._resultsHeight /  NUMBER_OF_SECTIONS_IN_SEARCH;
         let displayHeight = this._displayHeight - this._resultsHeight * (NUMBER_OF_SECTIONS_IN_SEARCH - 1) /  NUMBER_OF_SECTIONS_IN_SEARCH;
-        this.display.setExpanded(false, this._resultsWidth, 0, DASH_COLUMNS);
         this.actor.remove_all();
         this.actor.append(this._resultsText, Big.BoxPackFlags.NONE);
         this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
@@ -190,7 +188,6 @@ ItemResults.prototype = {
 
     _unsetSearchMode: function() {
         this.actor.height = this._resultsHeight;
-        this.display.setExpanded(false, this._resultsWidth, 0, DASH_COLUMNS);
         this.actor.remove_all();
         this.actor.append(this._resultsText, Big.BoxPackFlags.NONE);
         this.actor.append(this.display.actor, Big.BoxPackFlags.EXPAND);
@@ -379,7 +376,7 @@ Dash.prototype = {
                                             height: LABEL_HEIGHT});
         this._docsSection.append(this._docsText, Big.BoxPackFlags.NONE);
 
-        this._docDisplay = new DocDisplay.DocDisplay(this._displayWidth, DASH_COLUMNS, DASH_SECTION_PADDING);
+        this._docDisplay = new DocDisplay.DocDisplay(this._displayWidth);
         this._docsSection.append(this._docDisplay.actor, Big.BoxPackFlags.EXPAND);
 
         let moreDocsBox = new Big.Box({x_align: Big.BoxAlignment.END});